package ;
import js.Browser;
import js.html.HtmlElement;
import js.html.Image;
import js.JQuery;
import js.JQuery.JQueryHelper.*;
import me.cunity.debug.Out;
import Controller;

/**
 * ...
 * @author axel@cunity.me
 * 
 * inspired by code from:
 * CloudCarousel V1.0.5 - (c) 2011 by R Cecco. <http://www.professorcloud.com> - MIT License
 *
 */

typedef Options = 
{
	var callBack:JQuery->?Array<Item>->Void;
	var reflHeight:Float;
	var reflOpacity:Float;
	var reflGap:Float;
	var minScale:Float;
	var xPos:Float;
	var yPos:Float;
	var xRadius:Float;
	var yRadius:Float;
	var altBox:String;
	var titleBox:String;
	var FPS:Int;
	var autoRotate:String;
	var autoRotateDelay:Int;
	var speed:Float;
	var mouseWheel:Bool;
	var bringToFront:Bool;
	var hasCanvas:Bool;
	var width:Dynamic;
	var height:Dynamic;
	var id:String;
	var buttonLeft:HtmlElement;
	var buttonRight:HtmlElement;
	var maxDims: { width:Float, height:Float };
};

@:keep
@:expose
class Carousel
{
	static var options:Options;
	
	public static function carousel(j:JQuery):JQuery
	{
		options = 
		{
			callBack:showObject,
			reflHeight:56.0,
			reflOpacity:0.5,
			reflGap:2.0,
			minScale:0.5,
			xPos:0.0,
			yPos:0.0,
			xRadius:0.0,
			yRadius:0.0,
			altBox:'',
			titleBox:'',
			FPS:24,
			autoRotate:'yes',
			autoRotateDelay:8000,
			speed:0.1,
			mouseWheel:true,
			bringToFront:false,
			width:'100%',
			height:'100%',
			id:'',
			buttonLeft:null,
			buttonRight:null,
			maxDims: { width:0.0, height:0.0 },
			hasCanvas: true
		};	
		//var config:Dynamic = JQuery.parseJSON(('carousel-options'));
		var config:Dynamic = JQuery.parseJSON(j.attr('data-carousel-options'));
		if (j.length==0 || config.id == null)
		{
			trace( j.length );
			return j;
		}
		j.fadeOut(0);
		j.css('visibility', 'visible');
		Out.dumpObject(j.data());
		Out.dumpObject(config);
		
		for (f in Reflect.fields(options))
		{
			if(Reflect.field(config, f) != null)
				Reflect.setField(options, f, Reflect.field(config, f));
		}
		options.hasCanvas = Reflect.isFunction(Browser.document.createCanvasElement().getContext);
		trace('hasCanvas:' + (options.hasCanvas ? 'Y':'N') + j.height());
		//Out.dumpObject(options);

		if (config.maxDims == null)
		{
			options.maxDims = carouselDims(config.id);		
		}
		else
		{
			options.maxDims = config.maxDims;
		}
		Out.dumpObject(options.maxDims);
		var refWidth:Int =  j.parent().parent().width();
		var refHeight:Int = 0;
		var reflHeight:Float = options.reflHeight;
		var reflGap:Float = options.reflGap;
		var minScale:Float = options.minScale;
		
		if (config.yRadius != null)
		{
			options.yRadius = Std.parseInt(config.yRadius);
			refHeight = Math.round(options.maxDims.height + reflHeight + reflGap + options.yRadius + options.yRadius * minScale);
			j.children().first().height(refHeight);
			j.height(refHeight);
			trace(j.height());
			options.yPos = Math.round(options.yRadius * minScale);
		}
		else
		{
			refHeight = j.height();
			options.yRadius = Math.round(refHeight / config.yratio);
			options.yPos = Math.round(refHeight-(refHeight/(config.yratio*.5)+reflHeight+reflGap))/2;
		}
		options.xPos = Math.round(refWidth / 2);
		options.xRadius = (refWidth - options.maxDims.width / 2) / 2;
		
		if (options.altBox == 'create')
		{
			options.altBox = options.altBox + options.id;
			j.after(J('<div class="altBox" id ="' + options.altBox +'" />').css({'opacity': 0}));
		}
		
		j.data('carousel', new Controller( j, JQuery.cur.find('.cloudcarousel'), options));
		return j;
	}
	
	static function carouselDims(id)
	{
		var maxDims:Dynamic = {
			width:0,
			height:0
		};
		J('#' + id + ' img').each(function() {
			//Out.dumpJLayout(JQuery.cur);
			if(maxDims.width < JQuery.cur.width() )
				maxDims.width = JQuery.cur.width();
			if(maxDims.height < JQuery.cur.height())
				maxDims.height = JQuery.cur.height();
		});
		return maxDims;
	}

	
	public static function showObject(obj:JQuery, ?items:Array<Item>)
	{
		trace(obj.attr('id') + ':' + J('html').outerHeight() + ':' + J(Browser.window).height());
		obj.fadeIn(500);

		J('#altBox' + obj.attr('id')).css({visibility:'visible'});
		J('#altBox' + obj.attr('id')).animate( { opacity:1 } );
		Out.dumpJLayout(obj);
		//Out.dumpObject(obj.data);
		trace('xCentre:' + obj.data('carousel').xCentre);
		//trace('xCentre:' + obj.data('carousel').xCentre + ' sideLayout.h:' + J('#sideLayout').height());
		//carouselObj.push(obj.data('cloudcarousel'));
	}
	
}